<template>
	<div>
		<header class="aui-header">
			<!--<a class="aui-pull-left aui-btn">-->
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<!--<img src="../assets/rightbut.png">-->
			<!--</a>-->
			<div class="aui-title">友惠省钱购</div>
		</header>
		<!---->
		<div class="redpacket">
			<div  v-if="coupon.state == 0" class="redpaper" v-show="showred"><!--class="redpaper"-->
				<div class="redpaper-left">
					<div class="redname">{{coupon.price}}<i class="priceSymbols">元</i></div>
					<div class="redprice" style="display: none;">满{{coupon.price}}元使用</div>
				</div>
				<div class="redpaper-right">
					<div class="redvoucher" @click="couponbut(coupon.id)">立即领券</div><!--class="redvoucher"-->
					<label class="datename">{{coupon.startTime}}-{{coupon.endTime}}</label>
				</div>
			</div>
			<div  v-else-if="coupon.state == 1"  class="redhover"><!--class="redpaper"-->
				<div class="redpaper-left">
					<div class="redname">{{coupon.price}}<i class="priceSymbols">元</i></div>
					<div class="redprice" style="display: none;">满{{coupon.price}}元使用</div>
				</div>	
				<div class="redpaper-right">
					<div class="redvoucher_hover">已领取</div><!--class="redvoucher"-->
					<label class="datename">{{coupon.startTime}}-{{coupon.endTime}}</label>
				</div>
			</div>
			<div  v-else-if="coupon.state == 2"  class="redhover"><!--class="redpaper"-->
				<div class="redpaper-left">
					<div class="redname">{{coupon.price}}<i class="priceSymbols">元</i></div>
					<div class="redprice" style="display: none;">满{{coupon.price}}元使用</div>
				</div>
				<div class="redpaper-right">
					<div class="redvoucher_hover">已抢光</div><!--class="redvoucher"-->
					<label class="datename" style="display: none;">{{coupon.startTime}}-{{coupon.endTime}}</label>
				</div>
			</div>
			<div  v-else-if="coupon.state == 3"  class="redpaper"><!--class="redpaper"-->
				<div class="redpaper-left">
					<div class="redname">{{coupon.price}}<i class="priceSymbols">元</i></div>
					<div class="redprice" style="display: none;">满{{coupon.price}}元使用</div>
				</div>
				<div class="redpaper-right">
					<div class="redvoucher"  @click="login">登录领取</div><!--class="redvoucher"-->
					<label class="datename" style="display: none;">{{coupon.startTime}}-{{coupon.endTime}}</label>
				</div>
			</div>
			<div   class="redhover"  v-show="hidecon"><!--class="redpaper"-->
				<div class="redpaper-left">
					<div class="redname">{{coupon.price}}<i class="priceSymbols">元</i></div>
					<div class="redprice" style="display: none;">满{{coupon.price}}元使用</div>
				</div>
				<div class="redpaper-right">
					<div class="redvoucher_hover">立即领券</div><!--class="redvoucher"-->
					<label class="datename" style="display: none;">{{coupon.startTime}}-{{coupon.endTime}}</label>
				</div>
			</div>
		</div>
		<!--
        	作者：lanlimei
        	时间：2018-01-15
        	描述：商品信息
        -->
		<div class="productmodule">
			<div class="proinfo">
				<div class="proimg"><img :src="goodsSpu.mainImg"></div>
				<div class="goodsfont">
					<div class="protitle">{{goodsSpu.goodName}}</div>
					<span class="evalutename">已抢{{goodsSpu.totalSales}}件/件</span>
					<div class="originalprice">原件￥{{goodsSpu.price}}</div>
					<div class="activeprice">
						<div class="activename">券后价</div>
						<i class="pricelogo">￥</i>
						<span class="actpricere">{{goodsSpu.conPrice}}</span>
					</div>
				</div>
			</div>
			<div class="buybutton" @click="detailbut()">立即购买</div>
		</div>
		<div class="activeifo">
			<div class="activeifo-name"><i class="sameline"></i><span class="activeifoname">活动说明</span><i class="sameline"></i></div>
			<ul class="activeifo-explain">
				<li>1、点击“立即领券”按钮，领取成功后购买商品时使用，即可享受优惠。</li>
				<li>2、领取成功后下单自动减。</li>
				<li>3、原价为商品常规销售价格，券后价为领取完优惠券使用后的价格。</li>
			</ul>
		</div>

	</div>
</template>

<script>
	
	import { BaseUrl } from '../Baseurl/common.js';
	import { gzhUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				coupon:[],
				goodsSpu:[],
				newjson:[],
				showred:true,
				hidecon:false,
				href:'',
				token:'',
				goodsId:'',
				yunId:'',
			}
		},
		mounted:function(){
			
		},
		created() {
			this.href = window.location.href;
			this.yunId = this.$route.query.yunId
			this.goodsId = this.$route.query.goodsId
			localStorage.setItem('yunId', this.yunId);
			this.token = localStorage.getItem('token');
			if(this.token){
				var url = BaseUrl+'coupon/info?type=1&goodsId='+this.goodsId+"&appId=gzh&token="+this.token;
				this.$http.get(url).then(res => {
					this.coupon = res.data.data;
					this.goodsSpu = res.data.data.goodInfo;
					/*if(res.data.data.state==3){
						if(this.href.split('&')[4] != undefined){
							this.token = this.href.split('&')[4].split('=')[1];
							localStorage.setItem('token', this.token);
						}
						
						var url = BaseUrl+'coupon/info?'+'&goodsId=' + this.goodsId;
						this.$http.get(url).then(res => {
							this.coupon = res.data.data;
							this.goodsSpu = res.data.data.goodInfo;
						})
					}*/
				})
			}else{
				this.token = this.$route.query.token;
				alert(this.token)
				if(this.token){
					localStorage.setItem('token',this.token);
					var url = BaseUrl+'coupon/info?type=1&goodsId='+this.goodsId+"&appId=gzh&token="+this.token;
				    this.$http.get(url).then(res => {
						this.coupon = res.data.data;
						this.goodsSpu = res.data.data.goodInfo;
						/*if(res.data.data.state==3){
							if(this.href.split('&')[4] != undefined){
								this.token = this.href.split('&')[4].split('=')[1];
								localStorage.setItem('token', this.token);
							}
							var url = BaseUrl+'coupon/info?'+'&goodsId=' + this.goodsId;
							this.$http.get(url).then(res => {
								this.coupon = res.data.data;
								this.goodsSpu = res.data.data.goodInfo;
							})
						}*/
				    })
				}else{
				    //window.location.href = gzhUrl+'Uc/author?backUrl='+escape(this.href);
					var setBackUrl = BaseUrl + 'project/setBackUrl?backUrl=' + escape(location.href) ;
				    this.$http.get(setBackUrl).then(res => {
						if(res.data.code == "10000") {
							window.location.href = gzhUrl+'Uc/author?backUrl='+res.data.data;
						}else{
						    Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 3000
						    });
						}
					})
				}
			}
		},
		methods: {
			couponbut:function(obj){
				var url = BaseUrl+'coupon/receive?token='+this.token+'&appId=gzh&type=1&couponId='+obj;
				this.$http.get(url).then(res => {
					if(res.data.code == "10000"){
						this.newjson = res;
						this.showred  = false;
						this.hidecon = true;
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						});
					}
				})
			},
			login:function(){
				window.location.href = gzhUrl+'Uc/author?backUrl='+escape(this.href);
				//window.location.href = gzhUrl+'Uc/author?backUrl='+escape(this.hrefs);
				var setBackUrl = BaseUrl + 'project/setBackUrl?backUrl=' + escape(location.href) ;
				    this.$http.get(setBackUrl).then(res => {
						if(res.data.code == "10000") {
							window.location.href = gzhUrl+'Uc/author?backUrl='+res.data.data;
						}else{
						    Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 3000
						    });
						}
					})
			},
			detailbut:function(obj){
				/*var token = localStorage.getItem('token');
				if(token){
					this.$router.push({ path: '/goodsDetail?id='+this.goodsId })
				}else{
					window.location.href = gzhUrl+'Uc/author?backUrl='+escape(this.hrefs);
				}*/
				this.$router.push({ path: '/goodsDetail?id='+this.goodsId })
			}
		} 
	}
</script>

<style scoped="scoped">
	.aui-header {
		position: fixed;
		z-index: 999;
		top: 0;
		height: 1rem;
		background-color: #FFFFFF;
		color: #323232;
		right: 0;
		left: 0;
		width: 100%;
		font-size: 0.36rem;
		border-bottom: solid 1px #ccc;
		text-align: center;
	}
	
	.aui-pull-left {
		width: 0.2rem;
		height: 0.36rem;
		display: inline-block;
		/* padding: 0 0.25rem; */
		margin: 0.25rem;
	}
	
	.aui-pull-left>img {
		width: 100%;
		height: 100%;
	}
	
	.aui-title {
		line-height: 1rem;
		display: inline-block;
		margin-left: 0rem;
	}
	/******红包券******/
	
	.redpacket {
		height: 4.5rem;
		width: 100%;
		background: url(../assets/redpack.png);
		background-size: 100%;
		margin-top: 1rem;
		display: inline-flex;
	}
	
	.redpaper {
		width: 6rem;
		height: 2.36rem;
		background: url(../assets/redproback.png);
		background-size: 100%;
		margin: 0 auto;
		margin-top: 1.07rem;
		display: -webkit-flex;
	}
	.redhover{
		width: 6rem;
		height: 2.36rem;
		background: url(../assets/redproback_hover.png);
		background-size: 100%;
		margin: 0 auto;
		margin-top: 1.07rem;
		display: -webkit-flex;
	}
	.redpaper-left {
		width: 48.3%;
		height: 100%;
	}
	
	.redname {
		color: #FFFFFF;
		font-size: 1.2rem;
		text-align: center;
		margin-top: 0.3rem;
	}
	.priceSymbols{
		font-size: 0.25rem;
    	font-style: normal;
        margin-left: 0.1rem;
	}
	.redprice {
		line-height: 0.29rem;
		font-size: 0.28rem;
		color: #FFFFFF;
		text-align: center;
	}
	
	.redpaper-right {
		width: 51.7%;
		height: 100%;
	}
	
	.redvoucher {
		width: 1.8rem;
		height: 0.6rem;
		margin: 0 auto;
		background-color: #ff2040;
		font-size: 0.32rem;
		color: #FFFFFF;
		text-align: center;
		line-height: 0.6rem;
		margin-top: 0.89rem;
		border-radius: 0.3rem;
	}
	.redvoucher_hover{
		width: 1.8rem;
		height: 0.6rem;
		margin: 0 auto;
		background-color: #CCCCCC;
		font-size: 0.32rem;
		color: #FFFFFF;
		text-align: center;
		line-height: 0.6rem;
		margin-top: 0.89rem;
		border-radius: 0.3rem;
	}
	.datename {
		font-size: 0.22rem;
		display: block;
		margin: 0 auto;
		text-align: center;
		color: #989898;
		margin-top: 0.28rem;
	}
	/***商品内容****/
	
	.productmodule {
		padding: 0.32rem 0.25rem;
	}
	
	.proinfo {
		display: inline-flex;
	}
	
	.proimg {
		width: 2.8rem;
		height: 2.8rem;
		background: red;
	}
	
	.proimg>img {
		width: 100%;
		height: 100%;
	}
	
	.goodsfont {
		margin-left: 0.19rem;
		width: 60%;
	}
	
	.protitle {
		font-size: 0.26rem;
		line-height: 0.45rem;
		color: #323232;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.evalutename {
		color: #989898;
		font-size: 0.22rem;
		display: inherit;
		margin-top: 0.2rem;
	}
	
	.originalprice {
		color: #989898;
		font-size: 0.28rem;
		margin-top: 0.56rem;
	}
	
	.activeprice {
		display: flex;
	}
	
	.activename {
		font-size: 0.22rem;
		color: #FFFFFF;
		width: 1.03rem;
		height: 0.37rem;
		background: url(../assets/priceicon.png);
		background-size: 100%;
		text-align: center;
		line-height: 0.37rem;
		margin-top: 0.1rem;
	}
	
	.pricelogo {
		font-size: 0.22rem;
		color: #ff2040;
		font-style: initial;
		line-height: 0.57rem;
	}
	
	.actpricere {
		font-size: 0.28rem;
		line-height: 0.58rem;
		color: #ff2040;
	}
	
	.buybutton {
		width: 100%;
		height: 0.9rem;
		background-color: #FF2040;
		border-radius: 0.1rem;
		line-height: 0.9rem;
		text-align: center;
		font-size: 0.32rem;
		color: #FFFFFF;
	}
	
	.activeifo {
		padding: 0.25rem;
	}
	
	.activeifo-name {
		text-align: center;
		display: flex;
	}
	
	.sameline {
		width: 2.8rem;
		height: 0.02rem;
		background-color: #ccc;
		display: inline-block;
		margin-top: 0.15rem;
	}
	
	.activeifo-name>h4 {
		font-size: 0.33rem;
	}
	
	.activeifoname {
		font-size: 0.24rem;
		padding: 0 0.2rem;
	}
	
	.activeifo-explain {
		padding: 0 0.25rem;
		font-size: 0.24rem;
		color: #989898;
		line-height: 0.48rem;
	}
	
	.activeifo-explain>li {
		line-height: 0.48rem;
	}
	
	ul,
	li {
		list-style: none;
	}
</style>